.navbar {
    width: 300px;
    height: 100%;
    background: #333;
    position: relative;
    .navicon {
        width: 30px;
        display: block;
        text-align: center;
        line-height: 30px;
        color: #fff;
        background: #767676;
    }
    
    ul {
        margin: 0;
        padding: 0;
        li {
            list-style: none;
            line-height: 2.5rem;
            text-align: center;
            a {
                text-decoration: none;
                display: block;
                width: 100%;
                background: #333;
                color: #fff;
                position: relative;
                box-sizing: border-box;
                .fa {
                    position: absolute;
                    left: 10px;
                    top: .7rem;
                    &.image-icon {
                        width: 21px;
                        height: 21px;
                        background-size: 100%;
                        border-radius: 50%;
                        background-repeat: no-repeat;
                        top: 5px;
                        left: 8px;
                    }
                }
            }
            ul {
                display: none;
                li {
                    a {
                        background: #888;
                    }
                }
            }
            &.active {
                @include active();
                >a {
                    background: $primary;
                }
                ul {
                    display: block;
                }
            }
            &.expand {
                ul {
                    display: block;
                }
            }
            &:hover {
                >a {
                    background: $primary;
                }
            }
        }
    }
    >ul {
        &.nav-bottom {
            position: absolute;
            bottom: 0;
            width: 100%;
            max-height: 300px;
        }
    }

    &.min {
        width: 30px;
        >ul {
            >li {
                >a {
                    span {
                        display: none;
                    }
                    .fa {
                        position: static;
                    }
                }
                &.active {
                    a {
                        .fa {
                            position: static;
                        }
                        span {
                            display: none;
                        }
                    }
                }
            }
            li {
                &:hover {
                    >a {
                        span {
                            width: 270px;
                            display: block;
                            position: absolute;
                            background: $primary;
                            top: 0;
                            left: 30px;
                        }
                    }
                }
            }
        }
    }
}